<template>
  <div class="zsTab">
    <!-- 选项 -->
    <!-- [ "#20c17c", "#f9c309", "#8780ff", "#f93f5e"], -->
    <div class="p_maxbox">
      <p>
        <el-checkbox v-model="checkedAll" @change="checkedAllFun">
          <span>全选</span>
        </el-checkbox>
      </p>
      <p v-for="(item, idx) in forKind" :key="idx">
        <el-checkbox v-model="checkedArr[idx]">
          <span class="yuan" :style="{ background: setObj.colors[idx] }"></span>
          <span class="name_box">{{ item.name }}</span>
          <span>{{ item.num }}</span>
        </el-checkbox>
      </p>
    </div>

    <!-- <p>
      <el-checkbox v-model="checked2" label="组织"></el-checkbox
      ><span class="yuan" style="background: #f9c309"></span>
    </p>
    <p>
      <el-checkbox v-model="checked3" label="武器"></el-checkbox
      ><span class="yuan" style="background: #8780ff"></span>
    </p>
    <p>
      <el-checkbox v-model="checked4" label="军事"></el-checkbox
      ><span class="yuan" style="background: #f93f5e"></span>
    </p> -->

    <!--知识图普  -->
    <ZsTupu class="zstupu" :relation="relation" :setObj="checkedSetObj" />
    <div style=""></div>
  </div>
</template>

<script>
import ZsTupu from "@/components/echarts/AtlasCharts";
export default {
  props: {
    zhishiData: {
      type: Object,
    },
  },
  components: {
    ZsTupu,
  },
  data() {
    return {
      // 知识图谱中心(自身)颜色:
      meColor: "#fff",
      checkedAll: true, //是否全选
      // 选中-数组：
      checkedArr: [true, true, true, true, true, true, true, true],
      forKind: [
        {
          name: "人物关系",
          num: 0,
        },
        {
          name: "组织关系",
          num: 0,
        },
        {
          name: "部队关系",
          num: 0,
        },
        {
          name: "武器装备",
          num: 0,
        },
        {
          name: "设施目标",
          num: 0,
        },
        {
          name: "事件关系",
          num: 0,
        },
        {
          name: "社交媒体",
          num: 0,
        },
        {
          name: "国家关系",
          num: 0,
        },
      ],
      // 筛选后的：
      checkedSetObj: {
        nodes: [], //自身
        links: [], //线
        kind: [],
        //         // 设施目标
        // 图谱层级颜色：依次递减(去掉索引0，对应上图)
        colors: [],
        // 线的颜色：依次递减
        linksColors: [],
      }, //对应数据:
      setObj: {
        nodes: [], //自身
        links: [], //线
        kind: ["人物", "组织", "部队", "武器", "设施", "事件", "账号", "国家"],
        // 设施目标
        // 图谱层级颜色：依次递减(去掉索引0，对应上图)
        colors: [
          "#4DCD96",
          "#f9c309",
          "#f93f5e",
          "#AAA6FF",
          "#5260FA",
          "#E8C0CB",
          "#81D3F8",
          "#FAE9CB",
        ],
        // 线的颜色：依次递减
        linksColors: ["#006acc", "#ff7d18", "#10a050"],
      },
      // 关系网-对象：
      relation: {
        nodes: {},
        links: {},
      },
    };
  },
  computed: {},
  methods: {
    checkedAllFun() {
      this.checkedArr.forEach((item, idx) => {
        this.checkedArr[idx] = this.checkedAll;
      });
      // 执行
      this.checkedSetObj = this.serObjFun(this.setObj, this.checkedArr);
    },
    // set:对象自身,arr:选中的
    serObjFun(set, arr) {
      let c = JSON.parse(JSON.stringify(set));
      // 选中的索引值集合:
      let numArr = [0];
      // 筛选后的对象:
      let s = {
        nodes: [], //自身
        colors: [],
      };
      // 颜色追加：
      s.colors = [this.meColor, ...set.colors];
      //选中数字
      arr.forEach((item, idx) => {
        if (item) {
          // 对应选中的图层
          numArr.push(idx + 1);
        }
      });
      // console.log("", set, numArr);
      //
      set.nodes.forEach((item) => {
        // console.log(numArr, item.category, numArr.includes(item.category));
        if (numArr.includes(item.category)) {
          s.nodes.push(item);
        }
      });
      c.nodes = s.nodes;
      c.colors = s.colors;
      // console.log("什么", c);
      return c;
    },
    // 处理知识图谱
    setRelationData() {
      if (this.zhishiData) {
        // console.log("点点点点", this.zhishiData);
        this.setObj.nodes.push({
          name: this.zhishiData.subjectA.name,
          style: {
            //有值就赋值，没值就 红色
            color: this.setObj.colors,
            borderColor: "#b8babb",
          },
          id: this.zhishiData.subjectA.id,
          category: 0, //中心人物
        });
        this.zhishiData.relation.map((item, index) => {
          this.setObj.nodes.push({
            name: item.subjectBName,
            // 对应层级
            category: this.idxFun(item.instanceType),
            id: item.Id,
          });
          this.setObj.links.push({
            source: item.subjectBName,
            name: item.relation,
            id: item.relationId,
            color: 0, //对
            target: this.zhishiData.subjectA.name,
          });
          // 追加个数：
          if (this.forKind[this.idxFun(item.instanceType) - 1]) {
            this.forKind[this.idxFun(item.instanceType) - 1].num += 1;
          }
        });
        // 赋值：
        this.checkedSetObj = this.serObjFun(this.setObj, this.checkedArr);
        // 追加关系网：
        this.relativeNetworkFun(this.setObj);
      }
    },
    // 关系网
    relativeNetworkFun(setObj) {
      let r = {
        nodes: {},
        links: {},
      };
      // 关系-点；
      setObj.nodes.forEach((item) => {
        r.nodes[item.id] = [];
        this.$api.getProperty(item.id).then((res) => {
          r.nodes[item.id] = res;
        });
      });
      // 关系-线；
      setObj.links.forEach((item) => {
        r.links[item.id] = [];
        this.$api.getProperty(item.id).then((res) => {
          r.links[item.id] = res;
        });
      });
      // 赋值：
      this.relation = r;
      // console.log("关系网完成！", this.relation);
    },
    //
    idxFun(type) {
      let num = 0;
      this.setObj.kind.forEach((item, idx) => {
        if (item == type) {
          num = idx + 1;
        }
      });
      return num;
    },
  },
  watch: {
    // 选中,对应的赋值:
    setObj() {
      // console.log("变化", this.serObjFun(this.setObj, this.checkedArr));
      this.checkedSetObj = this.serObjFun(this.setObj, this.checkedArr);
    },
    checkedArr() {
      // console.log("22222", this.serObjFun(this.setObj, this.checkedArr));
      this.checkedSetObj = this.serObjFun(this.setObj, this.checkedArr);
    },
  },
  mounted() {
    // console.log(this.$route.params.id);
    this.setRelationData();
  },
};
</script>

<style lang="scss" scoped>
.zsTab {
  // color: rgba(63, 79, 249, 0.9);
  position: relative;
  width: 100%;
  // height: 670px;
  height: calc(100vh - 18.5vh);
  background: #fff;
  border-top: 1px solid rgba(15, 105, 178, 1);
  padding-left: 30px;
  .p_maxbox {
    position: absolute;
    display: inline-block;
    box-sizing: border-box;
    top: 15px;
    left: 15px;
  }
  .zstupu {
    // position: absolute;
    margin-left: 10px;
  }

  .name_box {
    display: inline-block;
    margin: 0 10px;
  }
  .yuan {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 3px;
  }
}
</style>
